// 配额统计报表（物料分类+客户维度）
import * as React from 'react';
import { useRef, useState, useEffect } from 'react';
import { getBrandSelectList, getDealerListByBrand } from '@/common/Request'
import './index.scss';
import { Button, Col, Form, Input, Row, DatePicker, Table, Select, Spin, message } from 'antd';
import { checkObj, toDateString } from '../../helper';
import { http } from '@/lib';
import apis from '@/apis/Report';
import { downBlobFile } from '@/utils/methods';
import moment from 'moment';

const { MonthPicker, RangePicker } = DatePicker;
const { Option } = Select;
// 搜索框
function SearchBar(props) {
    const {changeFatherDataSource, spinningLoading} = props;
    const [searchValue, setSearchValue] = useState(props.searchValue)
    // 保存销售组织列表
    const [brandList, setBrandList] = useState<any>([]);
    // 销售组织列表加载状态
    const [selectLoading, setSelectLoading] = useState(false);
    // 表单点击查询时候执行的方法
    const onSubmit = (e) => {
        e.preventDefault();
        if (searchValue.checkTime.length === 0) {
            message.warn("配额周期为必选项");
            return;
        }
        // 发送网络请求，将获得的数据给父组件进行使用
        changeFatherDataSource(searchValue)
    }
    // 获取销售组织列表
    useEffect(() => {
        let UaaSysInfo = JSON.parse(sessionStorage.getItem("UaaSysInfo"));
        setBrandList(UaaSysInfo.profile.brandList);
    }, [])
    const [mode, setMode] = useState(['month', 'month']);
    // const form = Form.createFormField()
    return (
        <div className="MatterAndCustomer-search-bar-form">
            <Form layout="inline" 
                name="formValue"
                // form={form}
                onSubmit={onSubmit}
            >
                <Row style={{height: '60px'}}>
                    <Col offset={1} span={7}>
                        <Form.Item
                            label="销售组织"
                        >
                            {/* 这是一个下拉选 */}
                            <Select placeholder="请选择销售组织" onChange={(values:any) => { setSearchValue({...searchValue, brandCode: values})}} 
                                style={{width:'200px', color: searchValue.brandCode == '' ? '#ccc' : ''}}
                                allowClear={true}
                                loading={selectLoading}
                                disabled={selectLoading}
                                dropdownMatchSelectWidth={false}
                                value={searchValue.brandCode != '' ? searchValue.brandCode : '请选择销售组织'}
                            >
                                {brandList.map(({ brandCode, brandName }) => (<Option style={{width: '250px'}} key={brandCode} value={brandCode}>{brandName}</Option>))}
                            </Select>
                            {/* <Input onChange={(e) => {setSearchValue({...searchValue, saleOrg: e.target.value})}} /> */}
                        </Form.Item>
                    </Col>
                    <Col offset={1} span={7}>
                        <Form.Item
                            label="客户名称"
                        >
                            <Input placeholder="请输入" style={{width: '200px'}} value={searchValue.dealerName} onChange={(e) => {setSearchValue({...searchValue, dealerName: e.target.value})}} />
                        </Form.Item>
                    </Col>
                    <Col offset={1} span={7}>
                        <Form.Item
                            label="配额周期"
                            labelAlign="left"
                            style={{marginLeft: '-16px'}}
                            required={true}
                        >
                            <RangePicker
                                placeholder={['开始月份', '结束月份']}
                                
                                value={searchValue.checkTime}
                                mode={mode}
                                onChange={(value) => {
                                    setSearchValue({...searchValue, checkTime: value || []});
                                }}
                                onPanelChange={(value, mode) => {
                                    // 判断选择的日期是否超过了今天
                                    if(value[0] as any > moment.now() || value[1]  as any > moment.now()) {
                                        message.warn('选择的日期不能超过当月')
                                    } else {
                                        setSearchValue({...searchValue, checkTime: value || []});
                                        setMode([mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]);
                                    }
                                }}
                                style={{width: '200px'}}
                                format="YYYY-MM"
                            />
                        </Form.Item>
                    </Col>
                    
                </Row>
                <Row gutter={24}>
                    {/* <Col offset={1} span={7}>
                        <Form.Item
                            label="物料分类代码"
                            labelAlign="left"
                            style={{marginLeft: '-26px'}}
                        >
                            <Input placeholder="请输入" style={{width:'200px'}} value={searchValue.productGroupCode} onChange={(e) => {setSearchValue({...searchValue, productGroupCode: e.target.value})}} />
                        </Form.Item>
                    </Col> */}
                    <Col offset={1} span={7}>
                        <Form.Item
                            label="物料分类名称"
                            labelAlign="left"
                            style={{marginLeft: '-26px'}}
                        >
                            <Input placeholder="请输入关键词搜索" style={{width: '200px'}} value={searchValue.groupName?.toString() !== 'NaN' ? searchValue.groupName : null} onChange={(e) => {setSearchValue({...searchValue, groupName: e.target.value})}} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row align="middle" justify="end" gutter={24} style={{marginTop: '20px', borderTop: "1px solid #eee",borderBottom: "1px solid #eee", paddingTop: "4px", paddingBottom: "4px"}}>
                    <Col offset={10} span={14}>
                        <Button htmlType="submit" type="primary" style={{marginRight: '20px'}}>查询</Button>
                        <Button type="default" onClick={() => {
                            setSearchValue({
                                // 销售组织
                                brandCode: '',
                                // 盘点周期
                                checkTime: [], // 里面装的是moment对象
                                // 客户名称
                                dealerName: '',
                                // 物料分类代码
                                // productGroupCode: '',
                                // 物料分类名称
                                groupName: '',
                            })
                            delete searchValue.productGroupCode;
                        }}>重置</Button>
                    </Col>
                </Row>
            </Form>
        </div>
    )
}

const QuotaDetailReport_CustomerDimension = (props) => {
    const [firstCome, setFirstCome] = useState(true);
    // 设置table的标题样式
    // const TableTitleStyle = {fontWeight:'bolder', color:'#000'} as any;
    const TableTitleStyle = {} as any;
    const [searchValue, setSearchValue] = useState<any>({
        // 销售组织
        brandCode: '',
        // 盘点周期
        checkTime: [], // 里面装的是moment对象
        // 客户名称
        dealerName: '',
        // 物料分类代码
        // productGroupCode: '',
        // 物料分类名称
        groupName: '',
    })
    // table的列标题
    const columns = [
        {
            title: <span style={TableTitleStyle}>销售组织</span>,
            key: 'brandName',
            dataIndex: 'brandName',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>物料分类代码</span>,
            key: 'productGroupCode',
            dataIndex: 'productGroupCode',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {
            title: <span style={TableTitleStyle}>物料分类名称</span>,
            key: 'groupName',
            dataIndex: 'groupName',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {   // 计算
            title: <span style={TableTitleStyle}>期初配额/件</span>,
            key: 'quotaNum',
            dataIndex: 'quotaNum',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {   // ?
            title: <span style={TableTitleStyle}>调整数量/件</span>,
            key: 'modifyCountNum',
            dataIndex: 'modifyCountNum',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {   // 期初+调整？
            title: <span style={TableTitleStyle}>实际配额/件</span>,
            key: 'realityQuotaNum',
            dataIndex: 'realityQuotaNum',
            align: 'center',
            // render: (text, record) => {
            //     if (record.beginningRealStock === null || record.modifyNum === null) {
            //         return '--'
            //     } else {
            //         return record.beginningRealStock + record.modifyNum;
            //     }
            // }
        },
        {   
            title: <span style={TableTitleStyle}>已使用配额/件</span>,
            key: 'quotaUseNum',
            dataIndex: 'quotaUseNum',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {
            title: <span style={TableTitleStyle}>可使用配额/件</span>,
            key: 'quotaCanNum',
            dataIndex: 'quotaCanNum',
            align: 'center',
            render: (text, record) => text === null ? '--' : text
        },
        {
            title: <span style={TableTitleStyle}>配额周期</span>,
            key: 'quotaStartTime',
            align: 'center',
            render: (text, record) => {
                if (record.quotaStartTime) {
                    let year = record.quotaStartTime.split('-')[0];
                    let month = record.quotaStartTime.split('-')[1];
                    return <span>{year + '年' + month + '月'}</span>
                }
                return '--';
            }
        },
        {
            title: <span style={TableTitleStyle}>配额有效期</span>,
            key: 'quotaTerm',
            align: 'center',
            render: (text, record) => {
                if (!record.quotaStartTime || !record.quotaEndTime) {
                    return '--';
                }
                // let start = record.quotaStartTime.split('-');
                // start[2] = start[2].split(' ')[0];
                // let end = record.quotaEndTime.split('-');
                // end[2] = end[2].split(' ')[0];
                // let s:string = '';
                // start.forEach(item => {
                //     s += item + '-';
                // })
                // end.forEach((item, index) => {
                //     index !== end.length - 1 ? s += item + '-' : s += item;
                // })
                // s.slice(-1);
                let start = record.quotaStartTime.split(' ')[0].split('-');
                let end = record.quotaEndTime.split(' ')[0].split('-');
                let s: string = `${start[0]}年${start[1]}月${start[2]}日-${end[0]}年${end[1]}月${end[2]}日`;
                return <span>{s}</span>
            }
        },
    ]
    // table的dataSource
    const [dataSource, setDataSource] = useState([]);
    // table的loading
    const [loading, setLoading] = useState(false);
    // table的pagination
    const [pagination, setPagination] = useState({
        page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'], total: 0,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
    });
    // 一个存放展开列的pagination
    const [selectDataPagination, setSelectDataPagination] = useState<any>([]);
    const [search, setSearch] = useState(false);
    // 从服务器获取数据
    useEffect(() => {
        if (!firstCome) {
            
            let request:any = {
                // page: pagination.page,
                // size: pagination.pageSize
            }
            let t:any = [];
            if (searchValue.checkTime.length > 0) {
                t = toDateString( searchValue.checkTime[0].format('YYYY-MM'),  searchValue.checkTime[1].format('YYYY-MM'));
            } 
            // else {
            //     message.warn("配额周期为必选项");
            //     return;
            // }
            // let ss = searchValue.checkTime[0].format('YYYY-MM').split('-');
            // let sy = parseInt(ss[0]);
            // let sm = parseInt(ss[1]);
            // let ee = searchValue.checkTime[1].format('YYYY-MM').split('-');
            // let ey = parseInt(ee[0]);
            // let em = parseInt(ee[1]);
            // // 没有检查通过
            // if (!checkObj(searchValue)){
            //     if(searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 5) {
            //         // 选择了品牌公司，则提示不能超过6个月
            //         message.error('请筛选周期，时间不能超过6个月');
            //         return;
            //     } else if (!searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 0){
            //         // 什么都没选
            //         message.error('请筛选周期，时间不能超过1个月');
            //         return;
            //     }
            // }
            setLoading(true);
            if (searchValue.brandCode) {
                request.brandCode = searchValue.brandCode;
            }
            if (searchValue.productGroupCode) {
                request.productGroupCode = searchValue.productGroupCode;
            }
            if (searchValue.groupName) {
                request.groupName = searchValue.groupName;
            }
            if (searchValue.dealerName) {
                request.dealerName = searchValue.dealerName;
            }
            if (t.length > 0) {
                request.inventoryBegineTime = t[0];
                request.inventoryEndTime = t[1];
            }
            // spinningLoading();
            http.post(apis.AreaAndCustomer, {
                conditions:request,
                page: pagination.page,
                size: pagination.pageSize
            })
                .then(res => {
                    let data = res.data.content;
                    data.forEach((item, index) => {
                        item.key = index;
                    });
                    setDataSource(data);
                    setPagination({...pagination, total: res.data.totalElements});
                    setLoading(false);
                })
                .catch(err => {
                    setLoading(false);
                })
        }
        firstCome && setFirstCome(false);
    }, [pagination.page, pagination.pageSize, search])
    // 一个存放展开的列的data
    const [selectData, setSelectData] = useState<any>([]);
    // 一个存放展开的列的loading
    const [selectDataLoading, setSelectDataLoading] = useState<any>([]);
    // 展开table触发的方法
    const onExpand = (expanded, record) => {
        // 如果是关闭，则返回null
        if (!expanded) return null;
        // 把当前行的id存起来，
        localStorage.setItem('historyRecord',record.id)
        // 否则则进行数据查询
        // 模拟网络请求
        let loadingArr = [...selectDataLoading];
        loadingArr[record.id] = true;
        // 先使用一个变量来保存原来的selectData
        let value = [...selectData];
        let pagination = [...selectDataPagination];
        pagination[record.id] = {
            page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'], total: 0,
            showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
        }
        let data = dataSource[record.id].detailReport;
        data.forEach((item, index) => {
            item.key = index;
        })
        // value[record.id] = dataSource[record.id].detailReport;
        value[record.id] = data;
        setSelectData(value);
        loadingArr[record.id] = false;
        setSelectDataLoading(loadingArr);
        setSelectDataPagination(pagination);
        // let request:any = {
        //     page: pagination[record.id].page,
        //     size: pagination[record.id].pageSize,
        //     inventoryBegineTime: record.quotaStartTime,
        //     inventoryEndTime: record.quotaEndTime,
        //     productGroupId: record.productGroupId,
        //     brandCode: record.brandCode
        // }
        setSelectDataLoading(loadingArr);
        
        // 通过重新赋值的方式，让当前的value[record.id] = 请求来的数据
        // 在这里发送网络请求
        // http.get(apis.AreaAndCustomerDetails, {params: request})
        //     .then(res => {
        //         let data = res.data;
        //         data.forEach((item, index) => {
        //             item.key = index;
        //         });
        //         value[record.id] = data;
        //         setSelectData(value);
        //         loadingArr[record.id] = false;
        //         setSelectDataLoading([...loadingArr]);
        //         setSelectDataPagination(pagination);
                
        //     })
        //     .catch(err => {
        //         loadingArr[record.id] = false;
        //         setSelectDataLoading([...loadingArr]);
        //     })
    }
    // 渲染展开的子表格
    const expandedRowRender = (record, index) => {
        // 子表格的列标题
        const columns:any = [
            {
                title: <span style={TableTitleStyle}>客户编码</span>,
                key: 'dealerCode',
                dataIndex: 'dealerCode',
                align: 'center'
            },
            {
                title: <span style={TableTitleStyle}>客户名称</span>,
                key: 'dealerName',
                dataIndex: 'dealerName',
                align: 'center'
            },
            {
                title: <span style={TableTitleStyle}>物料分类代码</span>,
                key: 'productGroupCode',
                dataIndex: 'productGroupCode',
                align: 'center',
                render: (text, record, index) => {
                    if (text === null) return '--';
                    return text;
                }
            },
            {
                title: <span style={TableTitleStyle}>物料分类名称</span>,
                key: 'groupName',
                dataIndex: 'groupName',
                align: 'center'
            },
            {   // 计算
                title: <span style={TableTitleStyle}>期初配额/件</span>,
                key: 'quotaNum',
                dataIndex: 'quotaNum',
                align: 'center',
                render: (text, record) => text === null ? '--' : text
            },
            {   // ?
                title: <span style={TableTitleStyle}>调整数量/件</span>,
                key: 'modifyCountNum',
                dataIndex: 'modifyCountNum',
                align: 'center',
                render: (text, record) => text === null ? '--' : text
            },
            {   // 期初+调整？
                title: <span style={TableTitleStyle}>实际配额/件</span>,
                key: 'realityQuotaNum',
                dataIndex: 'realityQuotaNum',
                align: 'center',
                // render: (text, record) => {
                //     if (record.beginningRealStock === null || record.modifyNum === null) {
                //         return '--'
                //     } else {
                //         return record.beginningRealStock + record.modifyNum;
                //     }
                // }
            },
            {   
                title: <span style={TableTitleStyle}>已使用配额/件</span>,
                key: 'quotaUseNum',
                dataIndex: 'quotaUseNum',
                align: 'center',
                render: (text, record) => text === null ? '--' : text
            },
            {
                title: <span style={TableTitleStyle}>可使用配额/件</span>,
                key: 'quotaCanNum',
                dataIndex: 'quotaCanNum',
                align: 'center',
                render: (text, record) => text === null ? '--' : text
            },
            {
                title: <span style={TableTitleStyle}>配额周期</span>,
                key: 'quotaStartTime',
                align: 'center',
                render: (text, record) => {
                    if (record.quotaStartTime) {
                        let year = record.quotaStartTime.split('-')[0];
                        let month = record.quotaStartTime.split('-')[1];
                        return <span>{year + '年' + month + '月'}</span>
                    }
                    return '--';
                }
            },
            {
                title: <span style={TableTitleStyle}>配额有效期</span>,
                key: 'quotaTerm',
                align: 'center',
                render: (text, record) => {
                    if (!record.quotaStartTime || !record.quotaEndTime) {
                        return '--';
                    }
                    let start = record.quotaStartTime.split('-');
                    start[2] = start[2].split(' ')[0];
                    let end = record.quotaEndTime.split('-');
                    end[2] = end[2].split(' ')[0];
                    let s:string = '';
                    start.forEach(item => {
                        s += item + '-';
                    })
                    end.forEach((item, index) => {
                        index !== end.length - 1 ? s += item + '-' : s += item;
                    })
                    s.slice(-1);
                    return <span>{s}</span>
                }
            },
        ]
        return (
            <Spin spinning={selectDataLoading[record.id]}>
                <Table 
                    columns={columns}
                    dataSource={selectData[record.id]}
                    pagination={selectDataPagination[record.id]}
                    onChange={(pageOptions) => {
                        let P = [...selectDataPagination];
                        P[record.id].page = pageOptions.current;
                        P[record.id].current = pageOptions.current;
                        P[record.id].pageSize = pageOptions.pageSize;
                        setSelectDataPagination([...P]);
                    }}
                />
            </Spin>
        )
    }
    // 修改table的datasouce的方法
    const changeFatherDataSource = (searchValue1) => {
        setSearchValue(searchValue1);
        if (pagination.page === 1) {
            setSearch(!search)
        }
        setPagination({...pagination, page: 1, current: 1});
        setLoading(false);
    }
    // 点击查询等待
    const spinningLoading = () => {
        setLoading(true)
    }
    const [exportLoading, setExportLoading] = useState(false);
    // 导出excel
    const exportExcel = () => {
        let t:any = [];
        if (searchValue.checkTime.length > 0) {
            t = toDateString( searchValue.checkTime[0].format('YYYY-MM'),  searchValue.checkTime[1].format('YYYY-MM'));
            let ss = searchValue.checkTime[0].format('YYYY-MM').split('-');
            let sy = parseInt(ss[0]);
            let sm = parseInt(ss[1]);
            let ee = searchValue.checkTime[1].format('YYYY-MM').split('-');
            let ey = parseInt(ee[0]);
            let em = parseInt(ee[1]);
            // 没有检查通过
            if (!checkObj(searchValue)){
                if(searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 5) {
                    // 选择了品牌公司，则提示不能超过6个月
                    // message.error('请筛选周期，时间不能超过6个月');
                    return;
                } else if (!searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 0){
                    // 什么都没选
                    // message.error('请筛选周期，时间不能超过1个月');
                    return;
                }
            }
        } else if(!checkObj(searchValue)){
            // message.warn("请选择盘点周期");
            return;
        }
        // if (searchValue.checkTime.length > 0) {
        //     t = toDateString( searchValue.checkTime[0].format('YYYY-MM'),  searchValue.checkTime[1].format('YYYY-MM'));
        //     let ss = searchValue.checkTime[0].format('YYYY-MM').split('-');
        //     let sy = parseInt(ss[0]);
        //     let sm = parseInt(ss[1]);
        //     let ee = searchValue.checkTime[1].format('YYYY-MM').split('-');
        //     let ey = parseInt(ee[0]);
        //     let em = parseInt(ee[1]);
        //     // 没有检查通过
        //     if (!checkObj(searchValue)){
        //         if(searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 5) {
        //             // 选择了品牌公司，则提示不能超过6个月
        //             message.error('请筛选周期，时间不能超过6个月');
        //             return;
        //         } else if (!searchValue.brandCode && (ey - sy) * 12 + (em - sm) > 0){
        //             // 什么都没选
        //             message.error('请筛选周期，时间不能超过1个月');
        //             return;
        //         }
        //     }
        // } else if(!checkObj(searchValue)){
        //     message.warn("请选择配额周期");
        //     return;
        // }
        // if (pagination.total === 0) {
        //     message.error("请先查找数据后再进行导出!");
        //     return;
        // }
        if (pagination.total > 30000) {
            message.error("数据超载不能导出，请重新筛选缩小数据范围");
            return;
        }
        setExportLoading(true)
        let url:string = '';
        let fileName:string = '';
        let param:string = `?page=${1}&size=${30000}`;
        for (let key in searchValue) {
            if (searchValue[key] && !(searchValue[key] instanceof Array)) {
                param += `&${key}=${searchValue[key]}`;
            } else if (searchValue[key] instanceof Array && searchValue[key].length > 0) {
                let start = searchValue[key][0].format('YYYY-MM');
                let end = searchValue[key][1].format('YYYY-MM');
                let t = toDateString(start, end);
                param += `&inventoryBegineTime=${t[0]}&inventoryEndTime=${t[1]}`;
            }
        }
        // let request:any = {
        //     page: 1,
        //     size: 30000
        // }
        // if (searchValue.checkTime.length > 0) {
        //     t = toDateString( searchValue.checkTime[0].format('YYYY-MM'),  searchValue.checkTime[1].format('YYYY-MM'));
        // } 
        
        // if (searchValue.brandCode) {
        //     request.brandCode = searchValue.brandCode;
        // }
        // if (searchValue.productGroupCode) {
        //     request.productGroupCode = searchValue.productGroupCode;
        // }
        // if (searchValue.groupName) {
        //     request.groupName = searchValue.groupName;
        // }
        // if (searchValue.dealerName) {
        //     request.dealerName = searchValue.dealerName;
        // }
        // if (t.length > 0) {
        //     request.inventoryBegineTime = t[0];
        //     request.inventoryEndTime = t[1];
        // }
        // url = apis.DownloadAreaAndCustomerExcel;
        // fileName = '配额统计报表（物料分类+客户维度）';
        // message.warn("导出中....请稍等");
        // setLoading(true);
        // http.get(url + param, {responseType: 'arraybuffer'})
        // // http.post(url, request, {responseType: 'arraybuffer'})
        //     .then(res => {
        //         downBlobFile(res.data, fileName)
        //         message.success("导出成功");
        //         setExportLoading(false)
        //     })
        //     .catch(err => {
        //         message.error("导出失败");
        //         setExportLoading(false)
        //     })
        let request:any = {
            // page: 1,
            // size: 30000,
        }
        for (let key in searchValue) {
            if (key !== 'checkTime' && searchValue[key]) {
                request[key] = searchValue[key];
            } 
            // else if (key === 'checkTime' && searchValue[key].length > 0) {

            // }
        }
        if (t.length > 0) {
            request.inventoryBegineTime = t[0];
            request.inventoryEndTime = t[1];
        }
        console.log(request);
        // return;
        url = apis.DownloadAreaAndCustomerExcel;
        fileName = '配额统计报表（物料分类+客户维度）';
        message.warn("导出中....请稍等");
        http.post(url, {conditions: request, page: 1, siez: 30000}, {responseType: 'arraybuffer'})
            .then(res => {
                downBlobFile(res.data, fileName)
                message.success("导出成功");
                setExportLoading(false)
            })
            .catch(err => {
                message.error("导出失败");
                setExportLoading(false)
            })
    }
    return (
        <React.Fragment>
            <div className="MatterAndCustomer-title">
                配额统计报表（物料分类+客户维度）
            </div>
            <SearchBar changeFatherDataSource={changeFatherDataSource} spinningLoading={spinningLoading} searchValue={searchValue}/>
            <Row justify="start" align="bottom" style={{marginTop: '10px', marginBottom: '10px'}}>
                <Col offset={0} span={1}>
                    <Button type="primary" onClick={() => {
                        exportExcel()
                    }} loading={exportLoading}>导出</Button>
                </Col>
            </Row>
            <Spin spinning={loading}>
                <Table 
                    // loading={loading}
                    columns={columns as any}
                    dataSource={dataSource}
                    pagination={pagination}
                    onChange={(pageOptions) => {
                        setPagination({
                            ...pagination,
                            pageSize: pageOptions.pageSize,
                            current: pageOptions.current,
                            page: pageOptions.current,
                        })
                    }}
                    // 展开table触发的方法
                    onExpand={onExpand}
                    expandedRowRender={expandedRowRender}
                    rowKey={(record, index) => {
                        record.id = index
                        return `${record.id}`
                    }}
                />
            </Spin>
        </React.Fragment>
    )
}

export default QuotaDetailReport_CustomerDimension;